<template>
  <div id="consumerBox">
    <div class="title">
      <span>消费者管理</span>
    </div>
    <div>
      <el-input placeholder="请输入用户ID,昵称,手机号查询" prefix-icon="el-icon-search" v-model="searchValue">
      </el-input>
      <el-button type="primary" @click="inquire(searchValue)">查询</el-button>
    </div>
    <div>
      <el-table :data="showTableData" border style="width: 100%" height="410">
        <el-table-column fixed prop="id" label="用户ID">
        </el-table-column>
        <el-table-column prop="nickname" label="昵称">
        </el-table-column>
        <el-table-column prop="phone" label="登录手机号">
        </el-table-column>
        <!-- <el-table-column prop="city" label="状态">
        </el-table-column> --> 
        <el-table-column  label="状态">
  <template slot-scope="scope">
    <span v-if="scope.row.type== 1">启用</span>
    <span v-else>禁用</span>
  </template>
</el-table-column>
        <el-table-column prop="address" label="注册时间">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="info" plain @click="handleClick(scope.row)">详情</el-button>
            <el-switch v-model="scope.row.type"
            :active-value="1" 
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"  
            active-text="禁用"
            inactive-text="启用"
            
            @change="switchChange(scope.row)">禁用</el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">
      </el-pagination>
    </div>
    <!-- 用户详情 -->
    <!-- <ConsumerDetails v-show="addVisible" :dataList="dataList"></ConsumerDetails> -->
  </div>
</template>

<script>
// import ConsumerDetails from './ConsumerDetails.vue';
export default {
 
  name: 'Consumer',
  data() {
    return {
      searchValue:'',
      currentPage4: 1,//放当前页
      pageSize: 5,//每页条数
      tableData:[],
      list:[]
      // tableData: [{
      //   date: '1',
      //   name: '王小虎',
      //   province: '123456',
      //   city: '正常',
      //   address: '2022,12,27',
      //   zip: 200333,
      //   type:1
      // }, {
      //   date: '2',
      //   name: '王小虎',
      //   province: '123456',
      //   city: '禁用',
      //   address: '2022,12,27',
      //   zip: 200333,
      //   type:0
      // }, {
      //   date: '3',
      //   name: '王小虎',
      //   province: '123456',
      //   city: '禁用',
      //   address: '2022,12,27',
      //   zip: 200333,
      //   type:0
      // }, {
      //   date: '4',
      //   name: '王小虎',
      //   province: '123456',
      //   city: '正常',
      //   address: '2022,12,27',
      //   zip: 200333,
      //   type:1
      // }, {
      //   date: '5',
      //   name: '王小虎',
      //   province: '123456',
      //   city: '禁用',
      //   address: '2022,12,27',
      //   zip: 200333,
      //   type:0
      // }, {
      //   date: '6',
      //   name: '王小虎',
      //   province: '123456',
      //   city: '正常',
      //   address: '2022,12,27',
      //   zip: 200333,
      //   type:1
      // }],
    };
  },
  methods: {
    //分页函数
    handleClick(row) {
      this.$router.push({name:'ConsumerDetails',params:{row}})
      
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val
    },
    switchChange(num){
      console.log(num.type);
    },
      // 查询消费者信息
  getStu(){
				this.$axios({
					url:"http://172.16.113.53:8088/cus/getAllCustomer",
					method:'get',
				}).then((res) => {
					console.log('获取所有消费者信息',res);
					if(res.code === 200){
						this.tableData = res.data;
					}else{
						this.$message({
							message: '服务器出错了',
							type: 'error'
						});
					}
				}).catch((err) => {
					console.log('获取消费者信息失败',err);
				})
  },
  // 搜索
  inquire(val){
    console.log(this.searchValue)
    this.searchValue = val //这里就是把input筐里的值赋给data里面的searchValue
    let data = this.searchValue
    this.$axios({
					url:"http://172.16.113.53:8088/cus/searchCustomer",
					method:'post',
          data:
          {
            nickname: data,
            phone: data,
          }
				}).then((res) => {
					console.log('查询所有消费者信息',res);
					if(res.code === 200){
						this.tableData = res.data;
					}else{
						this.$message({
							message: '服务器出错了',
							type: 'error'
						});
					}
				}).catch((err) => {
					console.log('查询消费者信息失败',err);
				})
  },
  // 启用 禁用


  // 详情
  
  },
  mounted() { },
  computed: {
    showTableData() {
      let start = this.pageSize * (this.currentPage4 - 1)
      let end = start + this.pageSize
      let data = this.tableData.slice(start, end)
      return data
    },
  },

  watch: {},
  created() {
			this.getStu()
		},
};

</script>

<style scoped>
.title {
  width: 70px;
  height: 20px;
  padding-left: 10px;
  border-left: 4px solid #0082cc;
  font-size: 14px;
  margin-bottom: 20px;
}

.el-input {
  width: 400px;
  margin-bottom: 20px;
}

.el-button--primary {
  margin-left: 20px;
}

.el-main {
  position: relative;
}

.block {
  position: absolute;
  bottom: 50px;
  left: 45%;
  margin-left: -40px;
}

.el-button--info {
  width: 26%;
  height: 30px;
  padding: 0;
  text-align: center;
  font-size: 12px;
  /* margin: 0 30px; */
  margin-right: 10px;
}

.el-button--warning {
  width: 26%;
  height: 30px;
  padding: 0;
  text-align: center;
  font-size: 12px;
}

/* .el-button{
  width: 26%;
  height: 30px;
  padding: 0;
  text-align: center;
  font-size: 12px;
} */
</style>
<style>
/* .el-input__inner {
  width: 350px;
} */
</style>
